<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <span style="margin:0 0 30px 80px;color:#5d65d5;font-size: 20px;font-weight: 700;">
    商家注册
  </span>
  <el-form-item label="用户昵称" prop="accName">
    <el-input v-model="ruleForm.accName"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" show-password prefix-icon="el-icon-lock" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" show-password prefix-icon="el-icon-lock" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="电话号码" prop="phone">
    <el-input v-model.number="ruleForm.phone"></el-input>
  </el-form-item>
    <el-form-item label="真实姓名" prop="realName">
    <el-input v-model="ruleForm.realName"></el-input>
  </el-form-item>
  <el-form-item label="店铺名称" prop="shopName">
    <el-input v-model="ruleForm.shopName"></el-input>
  </el-form-item>

  <el-form-item label="经营类型" prop="type">
   <el-cascader :options="options" clearable @change="handleChange"></el-cascader>
  </el-form-item>
  <el-form-item label="注册资金" prop="registerMoney">
    <el-input v-model.number="ruleForm.registerMoney"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">注册</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
    <span style="position:absolute;left:30px;top:40px">已有账号？</span>
    <div class="login">
    <router-link to="/login">
      去登录
    </router-link>
    </div>
  </el-form-item>
</el-form>
</template>

<style>
.demo-ruleForm{
    position: absolute;
    top: 40%;
    left: 55%;
    width: 307px;
    background: #FFFFFF;
    margin: -220px 0 0 -250px;
}
.login {
  margin: 0 0 0 80px;
}
.login a{
  padding: 2px;
  font-size: 16px;
  text-decoration: none;
  color: #5d65d5;
}
</style>

<script>

import { Sregister } from '@/api/user'
// import { parse } from 'qs'
export default {
  name: 'mregister',
  data () {
    var checkshopName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('商家名称不能为空'))
      } else {
        callback()
      }
    }
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      } else {
        callback()
      }
    }
    var checkregisterMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('注册资金不能为空'))
      } else if (value < 500) {
        return callback(new Error('注册资金不能低于500元'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      }, 1000)
    }
    var checkregion = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('注册地址不能为空'))
      } else {
        callback()
      }
    }
    var checkType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('经营类型不能为空'))
      } else {
        callback()
      }
    }
    var checkphone = (rule, value, callback) => {
      // const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
      // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
      // 所以在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          // if (phoneReg.test(value)) {
          //   callback()
          // } else {
          //   callback(new Error('电话号码格式不正确'))
          // }
          callback()
        }
      }, 100)
    }
    var checkrealName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('真实姓名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      const passReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        if (passReg.test(value)) {
          callback()
        } else {
          callback(new Error('密码至少包含 数字和英文，长度6-20'))
        }
      }, 100)
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        shopName: '',
        accName: '',
        registerMoney: '',
        pass: '',
        type: '',
        phone: '',
        region: '',
        realName: '',
        checkPass: ''
      },
      options: [{
        value: '1',
        label: '旗舰店'
      }, {
        value: '2',
        label: '专营店'
      }, {
        value: '3',
        label: '卖场店'
      }
      ],
      rules: {
        shopName: [
          { validator: checkshopName, trigger: 'blur' }
        ],
        accName: [
          { validator: checkUser, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [{
          validator: validatePass2, trigger: 'blur'
        }],
        registerMoney: [
          { validator: checkregisterMoney, trigger: 'blur' }
        ],
        phone: [
          { validator: checkphone, trigger: 'blur' }
        ],
        region: [
          { validator: checkregion, trigger: 'blur' }
        ],
        type: [
          { validator: checkType, trigger: 'blur' }
        ],
        realName: [
          { validator: checkrealName, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      const data = {
        registerMoney: this.ruleForm.registerMoney,
        shopName: this.ruleForm.shopName,
        type: parseInt(this.ruleForm.type[0]),
        accName: this.ruleForm.accName,
        pass: this.ruleForm.pass,
        realName: this.ruleForm.realName,
        role: 2,
        phone: this.ruleForm.phone + ''
      }
      Sregister(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        }
      })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     // this.axios.post('http://www.baidu.com', this.ruleForm)
      //     //   .then(res => {
      //     //     console.log(this.ruleForm)
      //     //   })
      //     console.log(this.ruleForm)
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    handleChange (value) {
      console.log(value)
      this.ruleForm.type = value
    }
  }
}
</script>
